<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://unpkg.com/vue@next"></script>
    <title>Vue classes</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="dynamic-component-demo" class="demo">
      <button
        v-for="tab in tabs"
        :key="tab"
        :class="['tab-button', { active: currentTab === tab }]"
        @click="currentTab = tab"
      >
        {{ tab }}
      </button>

      <component :is="currentTabComponent" class="tab"></component>
    </div>
  </body>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          currentTab: 'Home',
          tabs: ['Home', 'Posts', 'Archive']
        }
      },
      computed: {
        currentTabComponent() {
          return 'tab-' + this.currentTab.toLowerCase()
        }
      }
    })

    app.component('tab-home', {
      template: `<div>Home component</div>`
    })
    app.component('tab-posts', {
      template: `<div>Posts component</div>`
    })
    app.component('tab-archive', {
      template: `<div>Archive component</div>`
    })

    app.mount('#dynamic-component-demo')
  </script>
</html>
